<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Example</title>
    <style>
        #login-box {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div>
    <a id="login-btn">按钮</a>
    <div id="login-box" style="display:none;">默认隐藏的div</div>
</div>
</body>
<script>
    (function(){
        var btn = document.getElementById('login-btn');
        var box = document.getElementById('login-box');
        var timer = null;
        box.onmouseover = btn.onmouseover = function(){
            if(timer) clearTimeout(timer)
            box.style.display = 'block';
        }
        box.onmouseout = btn.onmouseout = function(){
            timer = setTimeout(function(){
                box.style.display = 'none';
            },400);
        }
    })();
</script>
</html>
